<template>
    <div style="width:100%;height:100%;" id="visite_volume_con"></div>
</template>

<script>
import echarts from 'echarts';
export default {
    name: 'visiteVolume',
    data () {
        return {
            //
        };
    },
    mounted () {
        this.$nextTick(() => {

            this.axios({
                method: 'get',
                url: this.$store.state.app.globalUrl+'/admin/Examinee/getAllExamineeAge',
                data: {}
            }).then(function(res){
                let visiteVolume = echarts.init(document.getElementById('visite_volume_con'));
                let num1=0;
                let num2=0;
                let num3=0;
                let num4=0;
                let num5=0;
                res.data.data.examineeAge.forEach(function(v,i){
                    if(v.age<18){
                        num1++;
                    }
                    if(v.age>=18&&v.age<24){
                        num2++;
                    }
                    if(v.age>=24&&v.age<28){
                        num3++;
                    }
                    if(v.age>=28&&v.age<32){
                        num4++;
                    }
                    if(v.age>=32){
                        num5++;
                    }
                })

                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        top: 0,
                        left: '2%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: ['18岁以下', '18-24', '24-28', '28-32', '32岁以上'],
                        nameTextStyle: {
                            color: '#c3c3c3'
                        }
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: [
                                {value: num1, name: '18岁以下', itemStyle: {normal: {color: '#2d8cf0'}}},
                                {value: num2, name: '18-24', itemStyle: {normal: {color: '#2d8cf0'}}},
                                {value: num3, name: '24-28', itemStyle: {normal: {color: '#2d8cf0'}}},
                                {value: num4, name: '28-32', itemStyle: {normal: {color: '#2d8cf0'}}},
                                {value: num5, name: '32岁以上', itemStyle: {normal: {color: '#2d8cf0'}}}
                            ]
                        }
                    ]
                };

                visiteVolume.setOption(option);

                window.addEventListener('resize', function () {
                    visiteVolume.resize();
                });
            })
            
        });
    }
};
</script>
